import React from "react";
import { observer, inject } from "mobx-react";
import { Row, Col, Icon, Button, Input, Tabs } from "antd";
import AddApp from "../addApp";
import Share from "./share";
import SubjectManager from "./subjectmanager";
import Remark from "./remark";
import "./style.scss";

const TABS = [{ name: "人员", key: "people" }, { name: "APP", key: "app" }];
const { TabPane } = Tabs;

@inject("SubjectStore")
@observer
class SubjectLeft extends React.Component {
    getRowName = () => {
        const { curTab } = this.props.SubjectStore;
        const rowtitle = {
            app: [{ name: "APP名称" }, { name: "风险评分" }, { name: "操作", isOperation: true }],
            people: [{ name: "人员名称" }, { name: "身份证" }, { name: "操作", isOperation: true }]
        };

        const curRow = rowtitle[curTab];
        return curRow.map(item => (
            <Col key={item.name} span={item.isOperation ? 10 : 7} className="app-list-col">
                {item.name}
                {!item.isOperation && (
                    <Icon type="swap" className="app-list-icon" onClick={() => console.log("paixu")} />
                )}
            </Col>
        ));
    };

    componentDidMount() {
        this.props.SubjectStore.getSubjectList();
    }

    handleChangeTab = item => {
        this.props.SubjectStore.changeTab(item);
    };

    openNext = item => {
        this.props.SubjectStore.updateStatus({ show: true });
        this.props.SubjectStore.selectCurItem(item);
    };

    updateStatus = status => {
        this.props.SubjectStore.updateStatus(status);
    };

    render() {
        const {
            resultData,
            curTab,
            curItem,
            status: { show, shareStatus, managerStatus, remarkStatus, addAppStatus, addPeopleStatus }
        } = this.props.SubjectStore;
        return (
            <div>
                {!show ? (
                    <div>
                        <div className="app-header">
                            <div className="app-list-title">
                                <h3 className="title-name">我的专题</h3>
                                {
                                    <div className="subject-div">
                                        <Button
                                            type="primary"
                                            className="subject-btn"
                                            ghost={false}
                                            onClick={() => this.updateStatus({ shareStatus: true })}
                                        >
                                            协同分享
                                        </Button>
                                        <Button
                                            type="primary"
                                            className="subject-btn"
                                            ghost={false}
                                            onClick={() => this.updateStatus({ managerStatus: true })}
                                        >
                                            专题管理
                                        </Button>
                                    </div>
                                }
                                <div className="app-text">共{<span>7</span>}个专题</div>
                            </div>
                        </div>
                        <div className="subject-content">
                            <div className="subject-list">
                                {resultData &&
                                    resultData.map(item => (
                                        <Row
                                            key={`subject-${item.id}`}
                                            className={`subject-item`}
                                            onClick={() => this.openNext(item)}
                                        >
                                            <Col span={14}>
                                                <span className="item-name">{item.name}</span>
                                            </Col>
                                            <Col span={10} className="col-right">
                                                <span>人员{item.peopleCount}</span>
                                                <span>/APP{item.appCount}</span>
                                                <span>
                                                    <Icon type="right" />
                                                </span>
                                            </Col>
                                        </Row>
                                    ))}
                            </div>
                        </div>
                    </div>
                ) : (
                    <div>
                        <div className="app-header">
                            <div className="app-list-title">
                                <div className="next-title">
                                    <span
                                        className="next-back"
                                        onClick={() => this.props.SubjectStore.updateStatus({ show: false })}
                                    >
                                        <Icon type="left" />
                                        返回
                                    </span>
                                    <h3 className="title-name">{curItem.name}</h3>
                                </div>
                                <div className="next-subject-div">
                                    <span className="next-sub-span">
                                        共人员 {curItem.peopleCount} APP {curItem.appCount}
                                    </span>
                                    <Button
                                        type="primary"
                                        className="subject-btn"
                                        ghost={false}
                                        onClick={() => this.updateStatus({ remarkStatus: true })}
                                    >
                                        有备注
                                    </Button>
                                    <Button
                                        type="primary"
                                        className="subject-btn"
                                        ghost={false}
                                        onClick={() => this.updateStatus({ addPeopleStatus: true })}
                                    >
                                        +添加人员
                                    </Button>
                                    <Button
                                        type="primary"
                                        className="subject-btn"
                                        ghost={false}
                                        onClick={() => this.updateStatus({ addAppStatus: true })}
                                    >
                                        +添加APP
                                    </Button>
                                </div>
                            </div>
                        </div>
                        <Input
                            placeholder={`查找已关注人员或APP`}
                            prefix={<Icon type="user" style={{ color: "rgba(0,0,0,.25)" }} />}
                            suffix={
                                <span
                                    style={{ color: "#4bb7ff", cursor: "pointer" }}
                                    onClick={() => console.log("output")}
                                >
                                    <Icon type="search" />
                                    搜索
                                </span>
                            }
                            type={"text"}
                            className="app-ipt"
                            onChange={value => console.log(value)}
                        />
                        <div className="app-list-content">
                            <div className="app-content-title">
                                <Tabs
                                    defaultActiveKey="1"
                                    activeKey={curTab}
                                    className={`app-content-tab`}
                                    onChange={this.handleChangeTab}
                                >
                                    {TABS.map(item => (
                                        <TabPane tab={item.name} key={item.key}>
                                            {resultData.length ? (
                                                <div className="app-list">
                                                    <Row className="app-list-header">{this.getRowName()}</Row>
                                                    <div
                                                        className="app-list-body"
                                                        style={{ height: "calc(100vh - 490px)" }}
                                                    >
                                                        {resultData.map(item => (
                                                            <Row key={`app-${item.id}`} className={`app-item`}>
                                                                <Col span={7} className="app-list-col">
                                                                    <span
                                                                        className="item-name"
                                                                        onClick={() => this.goDetail(item)}
                                                                    >
                                                                        {item.name}
                                                                    </span>
                                                                </Col>
                                                                <Col span={7} className="app-list-col">
                                                                    {curTab === "app" ? item.score : item.sfzh}
                                                                </Col>
                                                                <Col span={10} className="app-list-col">
                                                                    <span
                                                                        className="app-list-col-delete"
                                                                        onClick={() => this.delete(item)}
                                                                    >
                                                                        <Icon type="close" style={{ marginRight: 5 }} />
                                                                        删除
                                                                    </span>
                                                                    {item.follow ? (
                                                                        <span
                                                                            className="app-list-col-add"
                                                                            onClick={() => this.cancelControl(item.id)}
                                                                        >
                                                                            <Icon
                                                                                type="minus"
                                                                                style={{ marginRight: 5 }}
                                                                            />
                                                                            取消管控
                                                                        </span>
                                                                    ) : (
                                                                        <span
                                                                            className="app-list-col-add"
                                                                            onClick={() => this.addAppControl(item)}
                                                                        >
                                                                            <Icon
                                                                                type="plus"
                                                                                style={{ marginRight: 5 }}
                                                                            />
                                                                            加入管控
                                                                        </span>
                                                                    )}
                                                                </Col>
                                                            </Row>
                                                        ))}
                                                    </div>
                                                </div>
                                            ) : (
                                                <div>暂无数据</div>
                                            )}
                                        </TabPane>
                                    ))}
                                </Tabs>
                                {/* {TABS.map(item => (
                                    <div
                                        key={`title-${item}`}
                                        className={`app-content-tab ${item === curTab ? "active" : ""}`}
                                        onClick={() => this.handleChangeTab(item)}
                                    >
                                        {item}
                                    </div>
                                ))} */}
                            </div>
                            {/* {resultData.length ? (
                                <div className="app-list">
                                    <Row className="app-list-header">{this.getRowName()}</Row>
                                    <div className="app-list-body">
                                        {resultData.map(item => (
                                            <Row key={`app-${item.id}`} className={`app-item`}>
                                                <Col span={7} className="app-list-col">
                                                    <span className="item-name" onClick={() => this.goDetail(item)}>
                                                        {item.name}
                                                    </span>
                                                </Col>
                                                <Col span={7} className="app-list-col">
                                                    {curTab === "APP" ? item.score : item.sfzh}
                                                </Col>
                                                <Col span={10} className="app-list-col">
                                                    <span
                                                        className="app-list-col-delete"
                                                        onClick={() => this.delete(item)}
                                                    >
                                                        <Icon type="close" style={{ marginRight: 5 }} />
                                                        删除
                                                    </span>
                                                    {item.follow ? (
                                                        <span
                                                            className="app-list-col-add"
                                                            onClick={() => this.cancelControl(item.id)}
                                                        >
                                                            <Icon type="minus" style={{ marginRight: 5 }} />
                                                            取消管控
                                                        </span>
                                                    ) : (
                                                        <span
                                                            className="app-list-col-add"
                                                            onClick={() => this.addAppControl(item)}
                                                        >
                                                            <Icon type="plus" style={{ marginRight: 5 }} />
                                                            加入管控
                                                        </span>
                                                    )}
                                                </Col>
                                            </Row>
                                        ))}
                                    </div>
                                </div>
                            ) : (
                                <div>暂无数据</div>
                            )} */}
                        </div>
                    </div>
                )}
                {/* 添加APP */}
                {shareStatus && <Share onCancel={() => this.updateStatus({ shareStatus: false })} />}
                {/** 设置管控级别 */}
                {managerStatus && (
                    <SubjectManager
                        // data={curOpenItem}
                        onOk={this.setControlLevel}
                        onCancel={() => this.updateStatus({ managerStatus: false })}
                    />
                )}
                {remarkStatus && <Remark onCancel={() => this.updateStatus({ remarkStatus: false })} />}
                {addPeopleStatus && (
                    <AddApp type="SubjectPeople" onCancel={() => this.updateStatus({ addPeopleStatus: false })} />
                )}
                {addAppStatus && (
                    <AddApp type="SubjectAPP" onCancel={() => this.updateStatus({ addAppStatus: false })} />
                )}
            </div>
        );
    }
}

export default SubjectLeft;
